<div id="slipDetailsBar" class="slipdetails-bar">
</div>
<div id="maskSlipDetailsDiv" class="mask-slipdetails-div" style="display: none;" onclick="closeSlipDetailsDiv()"></div>

<script type="text/javascript">
    function openSlipDetailsDiv(html) {
        setDisplay('maskSlipDetailsDiv', '');
        document.body.style.overflow = 'hidden';
        setClass('slipDetailsBar', 'slipdetails-bar-out');
        setHtml('slipDetailsBar', html);
    }

    function closeSlipDetailsDiv() {
        setDisplay('maskSlipDetailsDiv', 'none');
        document.body.style.overflow = 'visible';
        setClass('slipDetailsBar', 'slipdetails-bar-in');
        setHtml('slipDetailsBar', '');
    }
</script>

<style type="text/css">
    .slipdetails-bar, .slipdetails-bar-out, .slipdetails-bar-in
    {
        width: 100%;
        height: 80%;
        bottom: -80%;
        background-color: white;
        position: fixed;
        z-index: 102;
    }

    .slipdetails-bar-out
    {
        -webkit-animation: slipdetailsout 0.1s;
        bottom: 0;
    }

    .slipdetails-bar-in
    {
        -webkit-animation: slipdetailsin 0.1s;
        bottom: -80%;
    }

    @keyframes slipdetailsout
    {
        from { bottom: -80%; }
        to { bottom: 0; }
    }

    @keyframes slipdetailsin
    {
        from { bottom: 0; }
        to { bottom: -80%; }
    }

    .mask-slipdetails-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 101;
    }
</style>